<template>
  <wm-asn-std :field-options="fieldOptions" :line-field-options="lineFieldOptions" :enable-accessory-pack-download="enableAccessoryPackDownload">
    <template v-slot:tab="">
      <q-tab label="入库差异报告" name="diff-report" />
    </template>
    <template v-slot:panel="">
      <q-tab-panel class="q-pa-none" name="diff-report">
        <q-table :columns="columnsInfoLine" :rows="$d.tableData" :loading="listDataLoadingState"
          v-model:pagination="$d.paginationInfoLine" color="primary" dense flat separator="cell">
          <template v-slot:top="props">
            <q-space />
            <q-btn @click="downloadExcel" dense flat icon="save_alt" title="导出Excel" />
            <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
              class="q-ml-sm" dense flat />
          </template>
          <template v-slot:no-data>
            <div class="full-width text-center">
              <q-icon name="error_outline" />
              无数据
            </div>
          </template>
          <!--客户端分页-->
          <template v-slot:bottom>
            <paging-bar :loading-state="listDataLoadingState" :page-no="$d.paginationInfoLine.page"
              :pageSize="$d.paginationInfoLine.rowsPerPage" :restrict-input-page-no="true"
              :show-refresh-button="false" :total-amount="$d.tableData.length"
              @go-to-page="(pageNo)=>{$d.paginationInfoLine.page=pageNo}"
              @pagesize-changed="(pageSize)=>{$d.paginationInfoLine.rowsPerPage=pageSize}" />
          </template>
        </q-table>
      </q-tab-panel>
    </template>
  </wm-asn-std>
</template>
<script lang="ts" setup>
import WmAsnStd from '@njt/wms/pages/work/Asn.vue'
import {reactive, ref} from 'vue'
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {AsnReceiveDiffReport} from 'src/defs/asn'
import {ColumnInfo} from '@njt/foundation/defs/comm'

const enableAccessoryPackDownload = $f.globalCfg.enableAccessoryPackDownload
const fieldOptions = $f.globalCfg.fieldOptions
const lineFieldOptions = $f.globalCfg.lineFieldOptions

let $d = reactive({
  tableData: [] as AsnReceiveDiffReport[],
  // 明细分页参数
  paginationInfoLine: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 40,
    // 是否倒序
    descending: false,
    // 按什么排序
    sortBy: '',
  },
})

// 列参数
let columnsInfoLine: ColumnInfo[] = [
  {
    label: '料号ID',
    name: 'skuId',
    field: 'skuId',
    align: 'left',
    defOrder: 1,
    sortable: false,
    defVisible: true
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 2,
    sortable: false,
    defVisible: true
  },
  {
    label: '产地',
    name: 'coo',
    field: 'coo',
    align: 'left',
    defOrder: 3,
    sortable: false,
    defVisible: true
  },
  {
    label: 'MFG',
    name: 'mfg',
    field: 'mfg',
    align: 'left',
    defOrder: 4,
    sortable: false,
    defVisible: true
  },
  {
    label: 'Batch',
    name: 'batch',
    field: 'batch',
    align: 'left',
    defOrder: 5,
    sortable: false,
    defVisible: true
  },
  {
    label: '预期数量',
    name: 'qtyOriginal',
    field: 'qtyOriginal',
    align: 'left',
    defOrder: 6,
    sortable: false,
    defVisible: true
  },
  {
    label: '实收数量',
    name: 'qtyReceived',
    field: 'qtyReceived',
    align: 'left',
    defOrder: 7,
    sortable: false,
    defVisible: true
  },
  {
    label: '差异数量',
    name: 'diffQty',
    field: 'diffQty',
    align: 'left',
    defOrder: 8,
    sortable: false,
    defVisible: true
  },
]

let serverErrorMessage = ref('')
// 是否处于数据列表加载的状态
const listDataLoadingState = ref(false)
const loadModelData = () => {
  listDataLoadingState.value = true
  $f.axios.get<AsnReceiveDiffReport[]>('/project/mhlbc/work/asn/get-asn-receive-diff-report/' + detailInfo.itemId)
    .then((resp) => {
      $d.tableData = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}

// 导出Excel
const downloadExcel = () => {
  let url = $f.misc.makeUrlWithQueryParam('/project/mhlbc/work/asn/get-asn-receive-diff-report-excel/' + detailInfo.itemId)
  $f.nw.downloadFileWithAuth(url, '', false)
}


const {
  detailInfo
} = useDetailHelper('/wms/work/asn',
  {},
  {},
  '/wms/work/asn',
  '/wms/work/asn/detail',
  '/wms/work/asn/create',
  '/wms/work/asn/edit',
  loadModelData,
  serverErrorMessage
)

</script>
